<template>
    <el-form ref="form" :rules="rules" :model="form" label-width="100px" class="mt-10">
        <el-form-item label="推广渠道" prop="channel">
            <el-select v-model="form.channel" class="filter-item" placeholder="推广渠道" style="width: 160px;">
                <el-option
                    v-for="(item, index) in options.channels"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
<!--        <el-form-item label="应用渠道" prop="source">-->
<!--            <select-app-source v-model="form.source" :type="[5, 6, 9, 10]" :clearable="false" :form="true"></select-app-source>-->
<!--        </el-form-item>-->
        <el-form-item label="应用包名" prop="package">
            <el-input v-model="form.package" placeholder="应用包名"></el-input>
        </el-form-item>
        <el-form-item label="三方APPID" prop="appid">
            <el-input v-model="form.appid" placeholder="三方APPID"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
            <el-input type="textarea" v-model="form.remark" :autosize="{ minRows: 4}" placeholder="备注"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" :loading="loading" @click="submit">确定</el-button>
            <el-button @click="cancel">返回</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
export default {
    props: {
        data: {}
    },
    components: {

    },
    data() {
        return {
            loading: false,
            form: {},
            formDefault: {
                id: '',
                source: 0,
                channel: 'kuaishou',
                package: '',
                appid: '',
                remark: '',
            },
            rules: {
                // source: {required: true, message: '请选择应用渠道', trigger: 'blur',},
                channel: {required: true, message: '请选择推广渠道', trigger: 'blur',},
                package: {required: true, message: '请输入应用包名', trigger: 'blur',},
                appid: {required: true, message: '请输入三方APPID', trigger: 'blur',},
            },
            options: this.$store.state.appAppid.options,
            isCreate: true,
        }
    },
    computed: {

    },
    watch: {
        data(newVal) {
            this.syncForm();
        },
    },
    methods: {
        getFormAction() {
            return this.isCreate ? 'appAppid/Store' : 'appAppid/Update';
        },
        submit() {
            this.$refs.form.validate(valid => {
                if (!valid) return false;
                this.loading = true;
                let form = this.$helper.deepClone(this.form);
                this.$store.dispatch(this.getFormAction(), form).then(res => {
                    this.$message.success(res.data.message);
                    this.$emit('submit');
                }).finally(() => {
                    this.loading = false;
                });
            });
        },
        cancel() {
            this.$emit('cancel');
        },
        syncForm() {
            this.form = Object.assign({}, this.data.id ? this.data : this.formDefault);
            this.isCreate = this.form.id <= 0;
        },
    },
    created() {
        this.syncForm();
    }
}
</script>

<style lang="scss" scoped>
.item-row {
    margin: 0 0 10px 0;
}
</style>

